<template>
  <div>
    <i-notice-bar icon="systemprompt" loop>
      2021届硕士、本科毕业生将于6月24日举行毕业典礼！！！
    </i-notice-bar>

    <div class="container_new showDividingLine" @click="btnClick(item)" v-for="(item,index) in newsList" :key="index">
      <a>
        <div class="image">
          <div class="viewer"
               style="padding-top: 66.071%;"
               :style="{backgroundImage: 'url(' +item.url + ')'}">
          </div>
        </div>
        <div class="info">
          <div class="ct-title">
            <p class="title" style="min-height: 78px;">{{ item.newsTitle }}</p>
          </div>
          <div class="root-sec">
            <span>{{ item.createBy }}</span>
            <!--            <span>{{ item.click }}点击</span>-->
            <span style="float: right;margin-right: 0;">{{ item.createTime }}</span>
          </div>
        </div>
      </a>
    </div>

  </div>
</template>
<script>
import {listNews, getNews, updateNewsClick, listNewsClick} from '@/api/news'

export default {
  name: 'News',

  data() {
    return {
      newsList: [], // 新闻数据
      newsById: {}, //单条新闻
      // 查询参数
      queryParams: {
        newsTitle: undefined,
        createBy: undefined,
        status: '0'
      }
    }
  },
  computed: {},
  mounted() {
    this.getNewList();
  },
  created() {},
  methods: {
    //查询新闻列表
    getNewList() {
      listNews(this.queryParams).then(response => {
        this.newsList = response.rows
        this.newsList.map(item => {
          // item.img = this.change(item.img)
          item.url = this.getObjectKeys(item.newsContent)
        })
        // this.total = response.total
      })
    },

    //点击选中
    btnClick(data) {
      updateNewsClick(data)
      console.log(data)
      // wx.navigateTo({
      //   url: './newsdetail/main',
      // })
      this.$router.push({
        path: './newsdetail/main',
        query: {
          id: data.newsId
        }
      })
    },
    /*getList(id) {
      getNews(id).then(response => {
        this.newsById = response.data
        this.newsById.img = this.change(this.newsById.img)
        console.log("img", this.changeUrl(this.newsById.img[0].fileName))
        this.newsById.img.map(item => {
          item.url = this.changeUrl(item.fileName)
        })
      })
    },*/
  }
}

</script>
<style scoped>
.info {
  position: relative;
  top: -3 rpx;
  min-height: 113px;
}

.ct-title {
  margin-bottom: 17.664px;
}

.title {
  font-size: 18px;
  line-height: 50 rpx;
  font-weight: 400;
  color: rgba(34, 34, 34, 1);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.root-sec {
  line-height: 17.656px;
  height: 17.656px;
}

span {
  display: inline-block;
  vertical-align: top;
  font-size: 13.2px;
  font-weight: 400;
  color: #999;
  line-height: 17.656px;
  height: 17.656px;
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.container_new {
  margin: 0px 4%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Microsoft Yahei", sans-serif;
}

.container_new:last-child {
  padding-bottom: 20px;
}

.container_new a {
  font-size: inherit;
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 12px 0px;
  outline: none;
}

.container_new:after {
  clear: both;
  content: '';
  display: block;
  height: 0px;
  width: 100%;
  box-sizing: inherit;
}

.showDividingLine:after {
  height: 1px;
  background: rgba(240, 240, 240, 1);
  -webkit-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  transform: scaleY(0.5);
  box-sizing: inherit;
}

.image {
  width: 32.174%;
  float: right;
  overflow: hidden;
  border-radius: 4px;
  margin-left: 4.348%;
  transform: scale(1);
  position: relative;
}

.viewer {
  overflow: hidden;
  background-color: #eaeaea;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 4px;
}

.news {
  background-color: rgb(255, 255, 255);
  width: 95%;
  margin: 20 rpx 20 rpx 15 rpx;
  -moz-box-shadow: 2 rpx 2 rpx 5 rpx #969696;
  -webkit-box-shadow: 2 rpx 2 rpx 5 rpx #838080;
  box-shadow: 2 rpx 2 rpx 5 rpx #969696;
  display: flex;
  padding: 0 0px;
  flex-wrap: wrap;
  border-radius: 5px;
}

.newsList {
  width: 95%;
  font-size: 12pt;
  padding: 20 rpx;
}

.title {
  color: #070707;
}

.time {
  text-align: right;
  color: #35353598;
  font-size: 10pt;
}
</style>
